/**
 * =============================================================================
 * ************   Snackbar   ************
 * =============================================================================
 */

@import '../button/index';

.mdui-snackbar {
  position: fixed;
  z-index: @z-index-snackbar;
  width: 100%;

  // 平板、桌面端样式
  @media (min-width: @screen-sm-min) {
    width: auto;
    min-width: 288px;
    max-width: 568px;
    border-radius: 2px;
  }

  .mdui-snackbar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;

    // 手机端的样式
    width: 100%;
    min-height: 48px;
    padding: 0 24px 0 24px;
    color: #fff;
    font-size: 14px;
    line-height: 20px;
    background-color: #323232;
    will-change: transform;
  }
}

.mdui-snackbar-center-top,
.mdui-snackbar-center-middle,
.mdui-snackbar-center-bottom,
.mdui-snackbar-left-top,
.mdui-snackbar-left-middle,
.mdui-snackbar-left-bottom,
.mdui-snackbar-right-top,
.mdui-snackbar-right-middle,
.mdui-snackbar-right-bottom {
  transition: transform .3s @animation-curve-default;
}

/* 位置 */
.mdui-snackbar-left-bottom,
.mdui-snackbar-center-bottom,
.mdui-snackbar-right-bottom {
  bottom: 0;
}

.mdui-snackbar-left-top,
.mdui-snackbar-center-top,
.mdui-snackbar-right-top {
  top: 0;
}

.mdui-snackbar-left-middle,
.mdui-snackbar-center-middle,
.mdui-snackbar-right-middle {
  top: 50%;
  transform: translateY(-50%);
}

// 平板、桌面端位置
@media (min-width: @screen-sm-min) {

  .mdui-snackbar-left-top,
  .mdui-snackbar-center-top,
  .mdui-snackbar-right-top {
    top: 24px;
  }

  .mdui-snackbar-left-bottom,
  .mdui-snackbar-center-bottom,
  .mdui-snackbar-right-bottom {
    bottom: 24px;
  }

  .mdui-snackbar-left-top,
  .mdui-snackbar-left-middle,
  .mdui-snackbar-left-bottom {
    left: 24px;
  }

  .mdui-snackbar-right-top,
  .mdui-snackbar-right-middle,
  .mdui-snackbar-right-bottom {
    right: 24px;
  }

  .mdui-snackbar-center-top,
  .mdui-snackbar-center-bottom {
    left: 50%;
    transform: translateX(-50%);
  }

  .mdui-snackbar-center-middle {
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

/* 文本 */
.mdui-snackbar-text {
  position: relative;
  max-width: 100%;
  padding: 14px 0 14px 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 按钮 */
.mdui-snackbar-action {
  margin-right: -16px;
  white-space: nowrap;
}


/**
 * =============================================================================
 * ************   Snackbar dark   ************
 * =============================================================================
 */
.layout-theme({
  .mdui-snackbar-content {
    background-color: #5d5d5d;
  }
});